<template>
	<zh-form-item :desc="props.desc" :layout="props.layout" :required="props.required" :label="props.label"
		:field="props.field" :rules="props.rules" :margin="props.margin" :padding="props.padding"
		:parentClass="props.parentClass" :align="props.align" :help="props.help" :border="props.border"
		:showError="props.showError" :requiredTitleChangeColor="props.requiredTitleChangeColor" :transprent="true"
		:round="props.round">
		<zh-radio-view v-bind="allAttrs" :align="props.inputAlign ? props.inputAlign : zhFormInputAlign"
			v-model="_value" v-model:model-str="_strvalue" @change="onChange"
			:transprent="props.transprent === null ? zhFormTransprent : props.transprent" :round="props.round">
		</zh-radio-view>
	</zh-form-item>
</template>

<script lang="ts" setup>
	import { computed, watch, PropType, useAttrs, ref, getCurrentInstance, onUnmounted, Ref, inject, isProxy, toRaw, ComputedRef, onMounted, nextTick } from 'vue';
	import { rulesItem } from '../zh-form-item/interface';
	const props = defineProps({
		parentClass: {
			type: String,
			default: '',
		},
		align: {
			type: String,
			default: '',
		},
		inputAlign: {
			type: String,
			default: '',
		},
		label: {
			type: String,
			default: '',
		},
		layout: {
			type: String as PropType<'vertical' | 'horizontal'>,
			default: '',
		},
		//表单描述
		desc: {
			type: String,
			default: '',
		},
		field: {
			type: String,
			default: '',
		},
		//表彰底部的单项注意说明。
		help: {
			type: String,
			default: '',
		},
		//是否必填
		required: {
			type: Boolean,
			default: false,
		},
		//检验规则
		rules: {
			type: [Object, Array] as PropType<Array<rulesItem> | rulesItem>,
			default: () => {
				return [{ validator: false, required: false }];
			},
		},
		margin: {
			type: Array as PropType<Array<number>>,
			default: () => [0, 0],
		},
		padding: {
			type: Array as PropType<Array<number>>,
			default: () => [0, 0],
		},
		//显示下划线。
		border: {
			type: Boolean,
			default: null,
		},
		showError: {
			type: Boolean,
			default: true,
		},
		//校验不通过时，是否让标题跟着变化文字颜色，默认是。
		requiredTitleChangeColor: {
			type: Boolean,
			default: false,
		},
		transprent: {
			type: [Boolean, String],
			default: null,
		},
		round: {
			type: Number,
			default: 24,
		},
		modelValue: {
			type: [String, Number, Boolean],
			default: '',
		},
		modelStr: {
			type: [String],
			default: '',
		},
		//前缀图标
		prefix: {
			type: String,
			default: '',
		},
		extend: {
			// 扩展属性，对象形式，存放组件的扩展属性
			type: Object,
			default: () => {
				return {};
			},
		},
	});
	const attrs = useAttrs();
	const allAttrs = computed(() => {
		return Object.assign(props.extend, attrs);
	});
	const emits = defineEmits(['update:modelValue', 'update:modelStr', 'change']);
	const _value = ref(props.modelValue);
	const _strvalue = ref(props.modelStr);
	const zhFormInputAlign = inject(
		'zhFormInputAlign',
		computed(() => 'left')
	);
	const zhFormTransprent = inject(
		'zhFormTransprent',
		computed(() => false)
	);
	const onChange = (item, e) => {
		emits('change', item, e);
	};
	watch(
		() => props.modelValue,
		(val) => {
			_value.value = val;
		},
		{
			deep: true,
		}
	);
	watch(
		() => _value,
		(val) => {
			emits('update:modelStr', _strvalue.value);
			emits('update:modelValue', val.value);
		},
		{
			deep: true,
		}
	);
</script>

<style></style>